<!--  -->
<template>
  <div>
    <div class="operation-group">
      <div>
        <el-button
          type="primary"
          @click="clickAdd()"
          style="border-radius: 15px"
          ><i class="el-icon-plus" />&nbsp;添加员工</el-button
        >
        <el-button type="success" style="border-radius: 15px"
          >批量导入</el-button
        >
      </div>
      <div>
        <el-form :inline="true" :model="searchStaffVo" class="demo-form-inline">
          <el-form-item label="工作日偏好" style="margin: 10px">
            <el-select
              v-model="searchStaffVo.dayPreference"
              placeholder="周一"
              style="width: 100px"
            >
              <el-option label="周一" value="1"></el-option>
              <el-option label="周二" value="2"></el-option>
              <el-option label="周三" value="3"></el-option>
              <el-option label="周四" value="4"></el-option>
              <el-option label="周五" value="5"></el-option>
              <el-option label="周六" value="6"></el-option>
              <el-option label="周日" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作时间偏好" style="margin: 10px">
            <el-time-select
              style="width: 125px"
              placeholder="起始时间"
              v-model="searchStaffVo.startTime"
              :picker-options="{
                start: '08:00',
                step: '01:00',
                end: '20:00',
              }"
            >
              <br />
            </el-time-select>
            <el-time-select
              style="width: 125px"
              placeholder="结束时间"
              v-model="searchStaffVo.endTime"
              :picker-options="{
                start: '10:00',
                step: '01:00',
                end: '21:00',
                minTime: startTime,
              }"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item label="班次时长偏好" style="margin: 10px">
            <el-input
              v-model="searchStaffVo.name"
              placeholder="连续工作小时数"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin: 10px">
            <el-button type="primary" icon="el-icon-search" circle></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div></div>
    <div>
      <el-table :data="staffList" style="">
        <el-table-column
          type="index"
          width="50"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="avatarUrl"
          label="用户"
          width="250"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <img
                  :src="scope.row.avatarUrl"
                  style="width: 66px; height: 66px; border-radius: 50%"
                />
              </el-col>
              <el-col :span="16">
                <el-row>
                  <el-col
                    :span="24"
                    style="
                      margin-left: 15px;
                      margin-top: 10px;
                      font-weight: 600;
                    "
                    >{{ scope.row.name }}</el-col
                  >
                </el-row>
                <el-row>
                  <el-col
                    :span="24"
                    style="margin-left: 15px; margin-bottom: 10px; color: gray"
                    >{{ scope.row.pinyinName }}</el-col
                  >
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="telephone"
          label="电话"
          width="150"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="position"
          label="职位"
          width="150"
          align="center"
          header-align="center"
        >
        </el-table-column>

        <el-table-column
          prop="preference"
          label="排班偏好"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-for="_preference in scope.row.preference"
              :key="_preference.type"
              >{{ _preference.value }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-search"
              circle
              @click="dispatchToPath('/home/staff/detail/' + scope.row.staffId)"
            ></el-button
            ><el-button
              type="primary"
              icon="el-icon-edit"
              @click="isUpdating = true"
              circle
            ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="pagination-region"
      :current-page="currentPage"
      :total="totalRecords"
      :page-size="limit"
      :page-sizes="[4, 6, 12, 16, 20, 24, 28]"
      style="margin: 30px 0; text-align: center"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="changeCurrentPage"
      @size-change="changeSize"
    />

    <el-dialog title="添加员工" :visible.sync="isAddStaff">
      <el-form ref="form" :model="staffInfo" label-width="80px">
        <el-form-item label="职工姓名">
          <el-input v-model="staffInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="职工性别">
          <el-radio-group v-model="staffInfo.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职工电话">
          <el-input v-model="staffInfo.telephone"></el-input>
        </el-form-item>
        <el-form-item label="职工电邮">
          <el-input v-model="staffInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="职工职位">
          <el-select v-model="staffInfo.position" placeholder="请选择员工职位">
            <el-option label="门店经理" value="门店经理"></el-option>
            <el-option label="副经理" value="副经理"></el-option>
            <el-option label="小组长" value="小组长"></el-option>
            <el-option label="收银" value="收银"></el-option>
            <el-option label="导购" value="导购"></el-option>
            <el-option label="库房" value="库房"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="偏好类型">
          <el-checkbox-group v-model="staffInfo.preference">
            <el-checkbox-button
              v-for="preference in preferences"
              :label="preference"
              :key="preference"
              >{{ preference }}</el-checkbox-button
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="工作日偏好"
          v-if="staffInfo.preference.includes('工作日偏好')"
          label-width="150"
        >
          <el-checkbox-group v-model="staffInfo.dayPreference">
            <el-checkbox label="1">周一</el-checkbox>
            <el-checkbox label="2">周二</el-checkbox>
            <el-checkbox label="3">周三</el-checkbox>
            <el-checkbox label="4">周四</el-checkbox>
            <el-checkbox label="5">周五</el-checkbox>
            <el-checkbox label="6">周六</el-checkbox>
            <el-checkbox label="7">周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="工作时间偏好"
          v-if="staffInfo.preference.includes('工作时间偏好')"
          label-width="150"
        >
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '20:00',
            }"
          >
          </el-time-select>
          <el-time-select
            style="margin: 5px 10px"
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
              start: '10:00',
              step: '01:00',
              end: '21:00',
              minTime: startTime,
            }"
          >
          </el-time-select>
          <el-button type="success" icon="el-icon-plus" circle></el-button>
          <el-button
            type="success"
            icon="el-icon-refresh-left"
            circle
          ></el-button>
        </el-form-item>

        <el-form-item
          label="班次时长偏好"
          v-if="staffInfo.preference.includes('班次时长偏好')"
          label-width="150"
        >
          <el-select
            v-model="staffInfo.hourPerfence"
            clearable
            placeholder="请选择"
          >
            <el-option label="2" value="2"> </el-option>
            <el-option label="3" value="3"> </el-option>
            <el-option label="4" value="4"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addStaff">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer title="修改员工信息" :visible.sync="isUpdating" direction="rtl">
      <el-form ref="form" :model="staffInfo" label-width="80px">
        <el-form-item label="职工姓名">
          <el-input v-model="staffInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="职工性别">
          <el-radio-group v-model="staffInfo.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职工电话">
          <el-input v-model="staffInfo.telephone"></el-input>
        </el-form-item>
        <el-form-item label="职工电邮">
          <el-input v-model="staffInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="职工职位">
          <el-select v-model="staffInfo.position" placeholder="请选择员工职位">
            <el-option label="门店经理" value="门店经理"></el-option>
            <el-option label="副经理" value="副经理"></el-option>
            <el-option label="小组长" value="小组长"></el-option>
            <el-option label="收银" value="收银"></el-option>
            <el-option label="导购" value="导购"></el-option>
            <el-option label="库房" value="库房"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="偏好类型">
          <el-checkbox-group v-model="staffInfo.preference">
            <el-checkbox-button
              v-for="preference in preferences"
              :label="preference"
              :key="preference"
              >{{ preference }}</el-checkbox-button
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="工作日偏好"
          v-if="staffInfo.preference.includes('工作日偏好')"
          label-width="150"
        >
          <el-checkbox-group v-model="staffInfo.dayPreference">
            <el-checkbox label="1">周一</el-checkbox>
            <el-checkbox label="2">周二</el-checkbox>
            <el-checkbox label="3">周三</el-checkbox>
            <el-checkbox label="4">周四</el-checkbox>
            <el-checkbox label="5">周五</el-checkbox>
            <el-checkbox label="6">周六</el-checkbox>
            <el-checkbox label="7">周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="工作时间偏好"
          v-if="staffInfo.preference.includes('工作时间偏好')"
          label-width="150"
        >
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '20:00',
            }"
          >
            <br />
          </el-time-select>
          <el-time-select
            style="margin: 5px 10px"
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
              start: '10:00',
              step: '01:00',
              end: '21:00',
              minTime: startTime,
            }"
          >
          </el-time-select>
          <el-button type="success" icon="el-icon-plus" circle></el-button>
          <el-button
            type="success"
            icon="el-icon-refresh-left"
            circle
          ></el-button>
        </el-form-item>
        <el-form-item
          label="当前所选工作时间"
          v-if="staffInfo.preference.includes('工作时间偏好')"
          label-width="150"
        >
          <el-tag
            type="primary"
            v-for="period in staffInfo.periodPrefence"
            :key="period"
            >{{ period }}</el-tag
          >
        </el-form-item>
        <el-form-item
          label="班次时长偏好"
          v-if="staffInfo.preference.includes('班次时长偏好')"
          label-width="150"
        >
          <el-select
            v-model="staffInfo.hourPerfence"
            clearable
            placeholder="请选择"
          >
            <el-option label="2" value="2"> </el-option>
            <el-option label="3" value="3"> </el-option>
            <el-option label="4" value="4"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addStaff">立即修改</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import pinyin from "pinyin";
import globalApi from "@/api/globalApi";
export default {
  data() {
    return {
      staffList: [
        {
          staffId: 202003150624,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/ssf.jpg",
          name: "盛上锋",
          position: "门店经理",
          telephone: "19157680738",
          email: "718457605@qq.com",
          preference: [
            {
              type: "工作日偏好", //0 工作日偏好 1工作时间偏好 2 班次时长偏好
              value: [2, 3],
            },
            {
              type: "工作时间偏好",
              value: ["8:00-10:00"],
            },
            {
              type: "班次时长偏好",
              value: 2,
            },
          ],
        },
        {
          staffId: 202003150624,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/xzh.png",
          name: "徐振华",
          position: "副经理",
          telephone: "18767175883",
          email: "718457605@qq.com",
          preference: [
            {
              type: "工作日偏好", //0 工作日偏好 1工作时间偏好 2 班次时长偏好
              value: [1, 5],
            },
            {
              type: "工作时间偏好",
              value: ["14:00-16:00"],
            },
            {
              type: "班次时长偏好",
              value: 4,
            },
          ],
        },
        {
          staffId: 202003150624,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/hsy.jpg",
          name: "胡思怡",
          position: "小组长",
          telephone: "19818509902",
          email: "718457605@qq.com",
          preference: [
            {
              type: "工作日偏好", //0 工作日偏好 1工作时间偏好 2 班次时长偏好
              value: [3, 5],
            },
            {
              type: "工作时间偏好",
              value: ["8:00-9:00", "14:00-15:00"],
            },
            {
              type: "班次时长偏好",
              value: 3,
            },
          ],
        },
        {
          staffId: 202003150624,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/mike.png",
          name: "李迈克",
          position: "员工（导购）",
          telephone: "18468515896",
          email: "718457605@qq.com",
          preference: [
            {
              type: "工作日偏好", //0 工作日偏好 1工作时间偏好 2 班次时长偏好
              value: [1, 4],
            },
            {
              type: "工作时间偏好",
              value: ["8:00-12:00", "16:00-18:00", "8:00-12:00"],
            },
            {
              type: "班次时长偏好",
              value: 2,
            },
          ],
        },
        {
          staffId: 202003150624,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/gy.jpeg",
          name: "郭曜",
          position: "店员（库房）",
          telephone: "18649585543",
          email: "718457605@qq.com",
          preference: [
            {
              type: "工作日偏好", //0 工作日偏好 1工作时间偏好 2 班次时长偏好
              value: [3, 4],
            },
            {
              type: "工作时间偏好",
              value: ["11:00-12:00", "16:00-17:00"],
            },
            {
              type: "班次时长偏好",
              value: 4,
            },
          ],
        },
      ],
      dialogFormVisible: false,
      staffInfo: {
        name: "徐振华",
        sex: "男",
        position: "门店经理",
        telephone: "18767175883",
        email: "718457605@qq.com",
        preference: ["工作日偏好", "工作时间偏好"],
        dayPreference: ["1", "2"],
        periodPrefence: ["08:00-11:00", "14:00-17:00"],
        hourPerfence: "4",
      },
      preferences: ["工作日偏好", "工作时间偏好", "班次时长偏好"],
      startTime: "08:00",
      endTime: "12:00",
      isUpdating: false,
      currentPage: 1,
      totalRecords: 15,
      limit: 6,
      isAddStaff: false,
      searchStaffVo: {
        startTime: "",
        endTime: "",
        dayPreference: "",
      },
    };
  },
  created() {
    this.packageStaffInfo();
    this.chineseToPinyin();
  },
  mounted() {},
  computed: {
    /*
    ...mapState("home", ["isAddStaff"]),
    isAddStaff: {
      get() {
        return this.$store.state.home.isAddStaff;
      },
      set(new_flag) {
        this.CHANGE_IS_ADD_STAFF(new_flag);
      },
    },*/
  },

  methods: {
    /*
    ...mapActions("home", ["changeIsAddStaff"]),
    ...mapMutations("home", ["CHANGE_IS_ADD_STAFF"]),
    */
    clickAdd() {
      this.isAddStaff = true;
      this.staffInfo = {
        name: null,
        sex: null,
        position: null,
        telephone: null,
        email: null,
        preference: [],
        dayPreference: [],
        periodPrefence: [],
        hourPerfence: "4",
      };
    },
    addStaff() {},
    changeCurrentPage() {},
    changeSize() {},
    dispatchToPath(path) {
      this.$router.push({
        path: path,
      });
    },
    chineseToPinyin(chineseString) {
      var result = "";
      // 将中文字符串转换为拼音字符串
      const pinyinString = pinyin(chineseString, {
        style: pinyin.STYLE_NORMAL,
      });
      for (var i = 0; i < pinyinString.length; i++) {
        var str = pinyinString[i][0];
        if (i == pinyinString.length - 1) {
          result += str;
        } else {
          if (i != 0) {
            result += " ";
          }
          result += str.charAt(0).toUpperCase() + str.slice(1);
        }
      }
      return result;
    },
    packageStaffInfo() {
      var daysOfWeek = [
        "",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日",
      ];
      this.staffList.forEach((staff) => {
        staff.preference.forEach((preference) => {
          if (preference.type == "工作日偏好") {
            preference.value = preference.value
              .map((number) => daysOfWeek[number])
              .join("、");
          } else if (preference.type == "工作时间偏好") {
            preference.value = preference.value.join("、");
          } else {
            preference.value = "每班" + preference.value + "小时";
          }
        });
        staff.pinyinName = this.chineseToPinyin(staff.name);
      });
    },
  },
};
</script>
<style scoped>
.operation-group {
  height: 65px;
  margin: 10px 0;
  border-radius: 15px;
  background: white;
  position: relative;
  display: flex;
}
.operation-group div:nth-child(1) {
  flex: 1;
  margin: auto 15px;
}
.operation-group div:nth-child(2) {
  flex: 4;
  margin: auto;
}
.el-tag {
  margin: 5px;
}
.cell > div {
  width: 200px;
}

.pagination-region {
  position: absolute;
  left: 40%;
  bottom: -10px;
}
</style>
